<template>
  <div class="wrap">

    <div class="ms-register">
      <br/>
      <el-form :model="form" label-width="auto" size="large" :rules="rules">
        <el-form-item label="用户名" prop="id">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item required>
          <el-col :span="11">
            <el-form-item  label="所读专业" prop="majority">
              <el-select
                  v-model="form.majority"
                  placeholder="点击下拉框选择"
                  size="large"
              >
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2" class="text-center" >
          </el-col>

          <el-col :span="11">
            <el-form-item  label="所在班级" prop="class_num">
              <el-input v-model.number="form.class_num" />
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item required>
          <el-col :span="11">
            <el-form-item label="入学年份" prop="entry_year">
              <el-input v-model.number="form.entry_year" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="text-center" >
          </el-col>
          <el-col :span="11">
            <el-form-item label="毕业年份" prop="graduate_year">
              <el-input v-model.number="form.graduate_year" />
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item required>
          <el-col :span="11">
            <el-form-item label="就业单位" prop="employers">
              <el-input v-model="form.employers" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="text-center" >
          </el-col>
          <el-col :span="11">
            <el-form-item label="所在城市" prop="city">
              <el-input v-model="form.city" />
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item required>
          <el-col :span="11">
            <el-form-item label="联系方式" prop="phone">
              <el-input v-model.number="form.phone" />
            </el-form-item>
          </el-col>
          <el-col :span="2" class="text-center" >
          </el-col>
          <el-col :span="11">
            <el-form-item label="电子邮箱" prop="email">
             <el-input v-model="form.email"/>
            </el-form-item>
          </el-col>
        </el-form-item>
        <div class="register-btn">
          <el-button type="primary" @click="register">注册</el-button>
        </div>

        <div class="return-btn">
          <el-button type="primary" @click="returnLogin">返回登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import router from "@/router";
import {getAllMajority} from "@/api/majority.ts";
import {Majority} from "@/api/types/majority.ts";
import {RegisterData, UserInfo} from "@/api/types/user.ts";
import {ElMessage, FormRules} from "element-plus";
import {registerUser} from "@/api/user.ts";

onMounted(() => {
  getAllMajority().then(data => {
    options.value = data.data
  })
})


const rules = reactive<FormRules<RegisterData>>({
  id: [
    {required:true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度为3到10', trigger: 'blur' },
  ],
  password: [
    {required:true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6到20', trigger: 'blur' },
  ],
  name: [
    {required:true, message: '请输入姓名', trigger: 'blur' },
  ],
  majority: [
    {required:true, message: '请选择专业', trigger: 'blur' },
  ],
  class_num: [
    {required:true, message: '请输入班级号', trigger: 'blur' },
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  entry_year: [
    {required:true, message: '请输入入学年份', trigger: 'blur' },
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  graduate_year: [
    {required:true, message: '请输入毕业年份', trigger: 'blur' },
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  employers: [
    {required:true, message: '请输入就业单位', trigger: 'blur' },
  ],
  city: [
    {required:true, message: '请输入所在城市', trigger: 'blur' },
  ],
  phone: [
    {required:true, message: '请输入电话号码', trigger: 'blur' },
    {pattern: /^\d{11}$/, message: '电话号码长度为11位', trigger: 'blur' },
    {type: 'number', message: '请输入数字', trigger: 'blur' },
  ],
  email: [
    {required:true, message: '请输入电子邮箱', trigger: 'blur' },
  ],
})


const form = reactive<RegisterData>({
  id: '',
  password: '',
  name: '',
  majority: '',
  class_num: '',
  entry_year: '',
  graduate_year: '',
  employers: '',
  city: '',
  phone: '',
  email: ''
})

const userInfo = ref<UserInfo>()

const register = () => {
  userInfo.value = {
    code: 0,
    msg: '',
    token: ''
  }
  console.log(form)
  registerUser(form).then(data => {
    userInfo.value = data
    if (userInfo.value?.code == 200) {
      ElMessage(userInfo.value?.msg)
      router.replace('/login')
    } else {
      ElMessage(userInfo.value?.msg)
    }
  })
}



const returnLogin = () => {
  router.replace('/login')
}

const options = ref<Majority[]>([])

</script>

<style scoped>

.ms-register {
  position: absolute;
  left: 40%;
  top: 35%;
  height: 75vh;
  width: 70vh;
  margin: -190px 0 0 -175px;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  padding: 20px;
}

.register-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
  background-color: #36c486;
  border-color: #36c486;
}

.return-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
  background-color: rgba(229, 208, 39, 0.72);
  border-color: rgba(229, 208, 39, 0.72)
}

</style>
